<div class="person_container">
  <dl class="row">
    <dt class='col-sm-1 username'>用户名</dt>
    <!-- <dd class='col-sm-1'>admin1</dd>  -->
  </dl>
  <dl class="row">
    <dt class="col-sm-1 realname">姓名</dt>
  </dl>
  <dl class="row">
    <dt class="col-sm-1 telephone">手机号</dt>
  </dl>
  <dl class="row">
    <dt class="col-sm-1 gender">性别</dt>
  </dl>
  <dl class="row">
    <dt class="col-sm-1 registerTime">注册时间</dt>
  </dl>
  <dl class="row">
    <dt class="col-sm-1 status">状态</dt>
  </dl>
  <div class="row">
		<div class="col-md-2">
			<button class="btn btn-default " type="submit" data-toggle="modal" data-target="#exampleModal" id="edit">修改</button>
    </div>
    <!-- 模态框开始 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="exampleModalLabel">修改个人信息</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
            <input type="email" class="form-control" id="username" placeholder="用户名">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
            <input type="password" class="form-control" id="password" placeholder="Password">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10">
            <input type="text" class="form-control" id="realname" placeholder="name">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">手机号</label>
            <div class="col-sm-10">
            <input type="text" class="form-control" id="telephone" placeholder="tel">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
            <div class="col-sm-10">
            <div class="radio ">
            <label>
              <input type="radio" name="optionsRadios" class="sex" value="男" checked >男
            </label> &nbsp;&nbsp;
            <label>
              <input type="radio" name="optionsRadios" class="sex" value="女">
              女
            </label>
            </div>
            </div>
          </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-default addOk">确定</button>
        </div>
        </div>
      </div>
    </div>
      <!--模态框结束-->
	</div>
</div>
<style>
  dd{
    color: #999;
    font-size: 17px;  
  }
  dt.col-sm-1{
    font-weight: 700;
    font-size: 16px;
    color: #666;  
  } 
  .person_container .btn-default{
		color:#fff;
		background-color: #2cb5ac;
		font-size: 12px;
	}
  .person_container .img{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: absolute;
    left: 550px;
    top: 100px;
  }
</style>
<script>
  var token=sessionStorage.getItem('token');
  //console.log(token)
  var person;
  var user;
  //请求用户信息
  function getUsers(){
    $.ajax({
      url:'http://47.94.229.139:7788/user/info?token='+token,
      type:'get',
      headers:{
        "Authorization":token,
      },
      success:function(data){
        //console.log(data); 
        person=data.data;
        $('.person_container .row .username').after(`<dd class='col-sm-1 clear'>`+person.username+`</dd>`);
        $('.person_container .row .realname').after(`<dd class='col-sm-1 clear'>`+person.realname+`</dd>`);
        $('.person_container .row .telephone').after(`<dd class='col-sm-1 clear'>`+person.telephone+`</dd>`);
        $('.person_container .row .gender').after(`<dd class='col-sm-1 clear'>`+person.gender+`</dd>`);
        $('.person_container .row .registerTime').after(`<dd class='col-sm-1 clear'>`+new Date(person.registerTime).toLocaleDateString()+`</dd>`);
        $('.person_container .row .status').after(`<dd class='col-sm-1 clear'>`+person.status+`</dd>`);
        $('.person_container').append(
          `<img src="`+person.userFace+`" alt="" class='img'>`
        );
      }      
    });
  }
  getUsers();
  //修改个人信息
  $('#edit').click(function(){
    // console.log(person);
      $('#username').val(person.username);
      $('#password').val(person.password);
      $('#realname').val(person.realname);
      $('#telephone').val(person.telephone);
  })
  $('.addOk').click(function(){
    var id=person.id;
    // console.log(id);
    var username=$('#username').val();
    var password=$('#password').val();
    var realname=$('#realname').val();
    var telephone=$('#telephone').val();
    //var radios=$('.user_container .sex');
    // console.log(radios)
    var sex;
    var radios=$('.sex')
        for(var i=0;i<radios.length;i++){
          if(radios[i].checked){
            sex=radios[i].value;
          }
        } 
    console.log(sex)
    var userFace=''
    user={
      id:id,
      username:username,
      password:password,
      realname:realname,
      telephone:telephone,
      gender:sex,
      address:person.address,
      status:person.status,
      birth:person.birth,
      nation:person.nation,
      userFace:person.userFace,
      politicsStatus:person.politicsStatus
    }
    $.ajax({
      url:'http://47.94.229.139:7788/baseUser/saveOrUpdate',
      type:'POST',
      headers:{
        'Authorization':sessionStorage.getItem('token'),
      },
      data:user,
      success:function(){
        //关闭模态框
        $("#exampleModal").modal("hide")
        //获取用户的登录信息
        // console.log(user);
        $('.clear').empty();
        $('.img').remove()
        getUsers();
      }
    })
  })
</script>
